import React from 'react'
import Equip from './equip'
import { Piece } from '@/types/piece'
import Result from './result'
// import { loadPiece } from '@/apis/piece'

export default function PieceLayout() {
  const [pieces, setPieces] = React.useState<(Piece | undefined)[]>([])
  const [, setResultText] = React.useState('')

  // React.useEffect(() => {
  //   const fetchData = async () => {
  //     // const data = await loadPiece({ size: 45 })
  //     // console.log('Fetched pieces:', data)
  //     // 限制45个以内
  //     // setPieces(data)
  //   }
  //   fetchData()
  // }, [])

  return (
    <main className="flex min-h-screen w-full flex-col items-center justify-center sm:p-24">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center justify-center gap-4">
        <Equip pieces={pieces} onChange={(pieces) => setPieces(pieces)} />
        <Result
          pieces={pieces}
          handle_result={setResultText}
          equipColumnNames={[
            '头',
            '衬衣',
            '腰带',
            '护腿',
            '鞋子',
            '护肩',
            '铠甲',
            '护手',
            '武器'
          ]}
          jewelryColumnNames={['爪子', '眼睛', '翅膀', '项链', '左戒', '右戒']}
        />
      </div>
    </main>
  )
}
